<template>
  <div>
    <el-row class="content">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-card style="color: #67C23A">
            <div><i class="el-icon-s-data mr-5"/>审核任务</div>
            <div class="chart-text">
              10
            </div>
            <div style="margin-top: 20px;">
              <span style="margin-right: 15%;">内审<cite>7</cite></span>
              <span>内审<cite>7</cite></span>
              <span style="float: right;">过程控制审核<cite>7</cite></span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="color: #E6A23C">
            <div><i class="el-icon-s-marketing mr-5"/>预警任务</div>
            <div class="chart-text">
              7
            </div>
            <div style="margin-top: 20px;">
              <span style="margin-right: 15%;">内审<cite>7</cite></span>
              <span>内审<cite>7</cite></span>
              <span style="float: right;">过程控制审核<cite>7</cite></span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card style="color: #FC466B">
            <div><i class="el-icon-s-flag mr-5"/>超期任务</div>
            <div class="chart-text">
              10
            </div>
            <div style="margin-top: 20px;">
              <span style="margin-right: 15%;">内审<cite>7</cite></span>
              <span>内审<cite>7</cite></span>
              <span style="float: right;">过程控制审核<cite>7</cite></span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 10px;height: 300px;">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header">
              <el-icon style="color: lightskyblue;font-size: 18px;margin-right: 6px" class="el-icon-setting"></el-icon>
              <span>常用功能</span>
            </div>
            <div style="height: 80px;">
              <el-col style="margin-left: 16px;" :span="7">
                <div @click="toRemember">
                  <el-icon style="margin-left: 14px;font-size: 3em;color: lightskyblue;cursor: pointer;" class="el-icon-notebook-2"></el-icon>
                </div>
                <div style="margin: 16px 0 0 6px;">
                  <el-badge style="align-self: center" :value="1" class="item">
                    待办事项
                  </el-badge>
                </div>
              </el-col>
              <el-col style="margin-left: 16px;" :span="7">
                <div @click="toSearch">
                  <el-icon style="margin-left: 14px;font-size: 3em;color: lightskyblue;cursor: pointer;" class="el-icon-search"></el-icon>
                </div>
                <div style="margin: 16px 0 0 6px">
                  项目查询
                </div>
              </el-col>
              <el-col style="margin-left: 16px;" :span="7">
                <div @click="dialogFormVisible = true">
                  <el-icon style="font-size: 3em;color: lightskyblue;margin-left: 30px;cursor: pointer;" class="el-icon-data-analysis"></el-icon>
                </div>
                <div style="margin: 16px 0 0 6px;">
                  风险分析填报
                </div>

                <!--新建风险分析dialog-->
                <el-dialog :title="'新建风险分析'" center :width="dialogWidth" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
                  <el-form :model="form" style="margin-top: 16px;">
                    <el-form-item label="项目名称:">
                      <el-input type="text" placeholder="请输入内容" style="width: 85%;" size="small" clearable v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-row :gutter="24">
                      <el-col :span="12">
                        <el-form-item label="合同编号:">
                          <el-input type="text" placeholder="请输入内容" style="width: 70%;" size="small" clearable v-model="form.number" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="风险分析方式:">
                          <el-select  style="width: 60%;" size="small" v-model="form.way" placeholder="请选择">
                            <el-option label="会议评审" value="meeting"></el-option>
                            <el-option label="协商评审" value="negotiate"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="能否签订合同:">
                          <el-select style="width: 58%;" size="small" clearable v-model="form.can" placeholder="请选择">
                            <el-option label="立即签订" value="yes"></el-option>
                            <el-option label="需要考虑" value="no"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="日期:">
                          <el-date-picker
                              v-model="form.time"
                              size="small"
                              style="width: 80%;"
                              type="datetime"
                              placeholder="选择日期时间"
                              :picker-options="pickerOptions">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item label="项目所处行业:">
                      <el-input style="width: 80%;" placeholder="请输入内容" size="small" clearable v-model="form.job" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label="'项目基本情况(投\n资规模、地理位置\n、周边环境等):'">
                      <el-input type="textarea" :rows="5" placeholder="请输入内容" style="width: 75%;margin-top:8px;" size="small" clearable v-model="form.case" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="评价范围:">
                      <el-input style="width: 85%;" placeholder="请输入内容" size="small" clearable v-model="form.range1" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="行业风险特性:">
                      <el-input style="width: 80%;" placeholder="请输入内容" size="small" clearable v-model="form.feature" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="已有工作基础:">
                      <el-input style="width: 80%;" placeholder="请输入内容" size="small" clearable v-model="form.basic" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="项目是否在资质业务范围之内:">
                      <el-radio v-model="radio.range2" label="1">是</el-radio>
                      <el-radio v-model="radio.range2" label="2">否</el-radio>
                      <el-input style="width: 38%;" placeholder="请输入内容" size="small" clearable v-model="form.range2" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否具备相关专业评价人员:">
                      <el-radio v-model="radio.person" label="1">是</el-radio>
                      <el-radio v-model="radio.person" label="2">否</el-radio>
                      <el-input style="width: 40%;" placeholder="请输入内容" size="small" clearable v-model="form.person" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="是否聘请相关专业的技术专家:">
                      <el-radio v-model="radio.profession" label="1">是</el-radio>
                      <el-radio v-model="radio.profession" label="2">否</el-radio>
                      <el-input style="width: 38%;" placeholder="请输入内容" size="small" clearable v-model="form.profession" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="甲方能否提供完整评价资料:">
                      <el-radio v-model="radio.whole" label="1">是</el-radio>
                      <el-radio v-model="radio.whole" label="2">否</el-radio>
                      <el-input style="width: 40%;" placeholder="请输入内容" size="small" clearable v-model="form.whole" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="合同额能否接受:">
                      <el-radio v-model="radio.resolve1" label="1">接受</el-radio>
                      <el-radio v-model="radio.resolve1" label="2">否</el-radio>
                      <el-input style="width: 50%;" placeholder="请输入内容" size="small" clearable v-model="form.resolve1" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="完成期限能否接受:">
                      <el-radio v-model="radio.resolve2" label="1">接受</el-radio>
                      <el-radio v-model="radio.resolve2" label="2">否</el-radio>
                      <el-input style="width: 48%;" placeholder="请输入内容" size="small" clearable v-model="form.resolve2" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="承担项目的风险:">
                      <el-radio v-model="radio.risk" label="1">接受</el-radio>
                      <el-radio v-model="radio.risk" label="2">否</el-radio>
                    </el-form-item>
                    <el-form-item label="能否签订合同:">
                      <el-radio v-model="radio.assign" label="1">接受</el-radio>
                      <el-radio v-model="radio.assign" label="2">否</el-radio>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button size="small" type="primary" @click="dialogFormVisible = false">转  发</el-button>
                    <el-button size="small" type="primary" @click="dialogFormVisible = false">提  交</el-button>
                    <el-button size="small" @click="dialogFormVisible = false">保  存</el-button>
                    <el-button size="small" @click="dialogFormVisible = false">取  消</el-button>
                  </div>
                </el-dialog>
              </el-col>
            </div>
          </el-card>
          <el-card style="margin: 20px 0 20px 0;" class="box-card">
            <div slot="header">
              <el-icon style="color: lightskyblue;font-size: 18px;margin-right: 6px" class="el-icon-pie-chart"></el-icon>
              <span>项目分析过程</span>
            </div>
            <div id="pie" style="height: 260px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header">
              <span>
                <el-link :type="show ? 'primary' : ''" @click="showMonth" style="font-size: 18px;" :underline="false">
                  <el-icon class="el-icon-s-marketing"></el-icon>
                  <span>月项目数</span>
                </el-link>
                <el-link :type="show ? '' : 'primary'" @click="showSeason" style="font-size: 18px;margin-left: 10px;" :underline="false">
                  <el-icon class="el-icon-chat-line-round"></el-icon>季度项目数
                </el-link>
              </span>
            </div>
            <div>
              <transition name="el-zoom-in-top">
                <div v-if="show" id="main" class="chart-content"></div>
              </transition>
              <transition name="el-zoom-in-top">
                <div v-if="!show" id="column" class="chart-content"></div>
              </transition>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-bottom: 30px;">
        <el-col style="margin-bottom: 20px">
          <el-card shadow="hover">
            <div slot="header">
              <el-icon style="color: lightskyblue;font-size: 18px;margin-right: 6px" class="el-icon-menu"></el-icon>
              <span>进行中的项目</span>
            </div>
            <div style="height: 240px;margin-bottom: 10px;">
              <el-table
                  :data="tableData"
                  stripe
                  height="230px"
                  style="width: 100%;">
                <el-table-column
                    prop="id"
                    label="id"
                    width="50"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="项目名称"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="leader"
                    label="负责人"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="time"
                    label="工期"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="amount"
                    label="合同额"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="process"
                    label="项目进度"
                    align="center">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!--点击回到顶部(放在内容里面--指向其上一级父类元素)-->
      <el-backtop target=".content"></el-backtop>
    </el-row>
  </div>
</template>

<script>

  import * as echarts from 'echarts';
  export default {
    name: "Home",
    data(){
      return{
        show: true,
        dialogFormVisible: false,
        dialogWidth: '600px',
        radio: {
          range2: '1',
          person: '2',
          profession: '1',
          whole: '2',
          resolve1: '1',
          resolve2: '1',
          risk: '2',
          assign: '1',
        },
        form:{
          name: '',
          number: '',
          way: '',
          can: '',
          time: '',
          job: '',
          case: '',
          range1: '',
          feature: '',
          basic: '',
          range2: '',
          person: '',
          profession: '',
          whole: '',
          resolve1: '',
          resolve2: '',
          risk: '',
          assign: '',
        },
        tableData: [{
          id:'1',
          name: '项目1',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目承接',
        }, {
          id:'2',
          name: '项目2',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目实施',
        }, {
          id:'3',
          name: '项目3',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目审核',
        }, {
          id:'4',
          name: '项目4',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目归档',
        }, {
          id:'5',
          name: '项目5',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目归档',
        }, {
          id:'6',
          name: '项目6',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目归档',
        }, {
          id:'7',
          name: '项目7',
          leader: 'AAAA',
          time: 'AAAA',
          amount: 'AAAA',
          process: '项目归档',
        }],

        //日期选择
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    mounted() {
      //折线图
      // let option1 = {
      //     tooltip: {
      //       trigger: 'axis'
      //     },
      //     legend: {
      //       data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      //     },
      //     grid: {
      //       left: '3%',
      //       right: '4%',
      //       bottom: '3%',
      //       containLabel: true
      //     },
      //     toolbox: {
      //       feature: {
      //         saveAsImage: {}
      //       }
      //     },
      //     xAxis: {
      //       type: 'category',
      //       boundaryGap: false,
      //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //     },
      //     yAxis: {
      //       type: 'value'
      //     },
      //     series: [
      //       {
      //         name: 'Email',
      //         type: 'line',
      //         stack: 'Total',
      //         data: [120, 132, 101, 134, 90, 230, 210]
      //       },
      //       {
      //         name: 'Union Ads',
      //         type: 'line',
      //         stack: 'Total',
      //         data: [220, 182, 191, 234, 290, 330, 310]
      //       },
      //       {
      //         name: 'Video Ads',
      //         type: 'line',
      //         stack: 'Total',
      //         data: [150, 232, 201, 154, 190, 330, 410]
      //       },
      //       {
      //         name: 'Direct',
      //         type: 'line',
      //         stack: 'Total',
      //         data: [320, 332, 301, 334, 390, 330, 320]
      //       },
      //       {
      //         name: 'Search Engine',
      //         type: 'line',
      //         stack: 'Total',
      //         data: [820, 932, 901, 934, 1290, 1330, 1320]
      //       }
      //     ]
      //   };
      // const ChartDom = document.getElementById('main')
      // const myChart = echarts.init(ChartDom);
      // option1 && myChart.setOption(option1);

      //饼状图
      // let option3 = {
      //   title: {
      //     text: 'Referer of a Website',
      //     left: '35%'
      //   },
      //   tooltip: {
      //     show: true,
      //     trigger: 'item',
      //   },
      //   legend: {
      //     orient: 'vertical',
      //     left: 'left'
      //   },
      //   series: [
      //     {
      //       type: 'pie',
      //       center: ['60%','55%'],
      //       radius: '70%',
      //       label:{            //饼图图形上的文本标签
      //         normal:{
      //           show:true,
      //           position:'outer', //标签的位置
      //           textStyle : {
      //             fontWeight : 300 ,
      //             fontSize : 16    //文字的字体大小
      //           },
      //           formatter:'{d}%'
      //         }
      //       },
      //       data: [
      //         { value: 1048, name: 'Search Engine' },
      //         { value: 735, name: 'Direct' },
      //         { value: 580, name: 'Email' },
      //         { value: 484, name: 'Union Ads' },
      //         { value: 300, name: 'Video Ads' }
      //       ],
      //       emphasis: {
      //         itemStyle: {
      //           shadowOffsetX: 0,
      //           shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       }
      //     }
      //   ]
      // };
      // const pieDom = document.getElementById('pie');
      // const myPie = echarts.init(pieDom);
      // option3 && myPie.setOption(option3);

      //柱状图
      // const option2 = {
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow'
      //     }
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     containLabel: true
      //   },
      //   xAxis: [
      //     {
      //       type: 'category',
      //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      //       axisTick: {
      //         alignWithLabel: true
      //       }
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value'
      //     }
      //   ],
      //   series: [
      //     {
      //       name: 'Direct',
      //       type: 'bar',
      //       barWidth: '60%',
      //       data: [10, 52, 200, 334, 390, 330, 220]
      //     }
      //   ]
      // };
      // const TomDom = document.getElementById('column')
      // const myTom = echarts.init(TomDom);
      // option2 && myTom.setOption(option2);

      // this.request("")
    },
    methods:{
      showMonth() {
        this.show = true
      },
      showSeason() {
        this.show = false
      },
      toRemember(){
        this.$router.push('/remember')
        // localStorage.setItem("name",'待办事项')
        this.$store.commit("selectMenu", {name:'待办事项'})
      },
      toSearch(){
        this.$router.push('/search')
        // localStorage.setItem("name",'项目查询')
        this.$store.commit("selectMenu", {name:'项目查询'})
      },
    }
  }
</script>

<style scoped>
  /*卡片样式*/
  .box-card {
    /*卡片宽度自适应浏览器屏幕大小*/
    width: 100%;
  }
  /*卡片表格样式*/
  .chart-text{
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
  }
  .chart-content{
    width: 100%;
    height: 445px;
    margin-bottom: 10px;
  }

  .content{
    height: 100%;
  }

  /*label换行css*/
  .el-form ::v-deep .el-form-item .el-form-item__label{
    white-space: pre-line;
  }
</style>
